<div class="pm_modal small {{ctrl.class}}" role="dialog" style="display: block;">
    <div class="modal-dialog">
        <button type="button" ng-click="ctrl.cancel()" aria-hidden="true" title-translate="Close" title-translate-context="Action" class="fa fa-times close"></button>
        <div class="modal-content">
            <div class="modal-header">
                <h3 class="modal-title" translate translate-context="Title">Import</h3>
            </div>
            <div class="modal-body">
                <p translate translate-context="Info">We support importing CSV files from Outlook, Outlook Express, Yahoo! Mail, Hotmail, Eudora and some other apps. We also support importing vCard. (UTF-8 encoding). <a href="https://protonmail.com/support/knowledge-base/adding-contacts/" target="_blank">Need help?</a></p>
                <div ng-hide="ctrl.fileDropped" class="dropzone dropzone--with-click" id="dropzone" ng-class="{'hover': hover}">
                    <p translate translate-context="Info">Drop file or click here</p>
                </div>
                <p ng-show="ctrl.fileDropped" class="text-center bold" ng-bind="ctrl.fileDropped"></p>
                <input id="selectedFile" type="file" style="display: none;" />
            </div>
        </div>
        <div class="modal-footer">
            <button type="button" class="pm_button" ng-click="ctrl.cancel()" translate translate-context="Action">Cancel</button>
            <button type="button" class="pm_button primary pull-right" ng-disabled="!ctrl.fileDropped" ng-click="ctrl.import()" translate translate-context="Action">Import</button>
        </div>
    </div>
    <div class="modal-overlay"></div>
</div>
